iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 9
0
自我挑戰組

網頁排版個人學習筆記系列 第 9

HTML&CSS|position 屬性

  • 分享至 

  • xImage
  •  

文章提要

fixed、relative、absolute、z-index用法


opsition的屬性

fixed 範例
元素位置固定,頁面捲動還是會固定在相同位置

  1. 若未設定位置,預設位置會固定於此網頁左上方(body位置)
  2. 可設定top、bottom、right、left改變元素位置
    fixed示意圖

relative
相對位置

absolute
絕對位置

  • 當元素設定position:absolute;後,就會尋找 若找不到,就會以目前網頁的body左上角為定位點

z-index
可設定元素的堆疊順序

  • 只能用於像position這樣的定位元素上使用。
  • z-index數字越大,圖層越前面 (預設值為0)
  • 想設定元素間哪個圖層較上方,就設定z-index
z-index:1; /*權重較小*/
z-index:2; /*權重較大*/

相對定位relative+絕對定位absolute+z-index的排版方式

相對於float有使元素間併排的效果,relative與absolute可使元素重疊在一起。

  • relative與absolute使用
    讓box在設定範圍(.frame)內移動 範例
    絕對位置與相對位置示意圖

    • .box如果設定position: absolute; 它就會開始找position: relative;在找不到的狀況下,會依照瀏覽器當座標 範例
    • 如果.frame未寫relative,.box則還是會依照瀏覽器為父元素範例
    • .box也可寫負的數值讓它和.frame重疊,可用此範例試試
  • relative與absolute使用加入z-index使用
    banner與nav重疊
    relative與absolute使用加入z-index使用

    • .banner範圍比.nav大,所以.banner設定relative,讓.nav跟隨 範例
    • 子元素.nav的父元素已經不是wraper而是banner了,所以記得寫高度與寬度才能顯示
    • .nav設定absolute後會被.banner覆蓋住,設定z-index的數值高於.banner即可顯示出來
    • 選單與banner合併範例

參考
關於 position 屬性文章


上一篇
HTML&CSS-解決選單hover加底線效果,背景跳動問題
下一篇
HTML&CSS| 選擇器大於的用法
系列文
網頁排版個人學習筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言